<!DOCTYPE html>
<html>
<!-- Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/ -->
<head>
  <meta charset="utf-8">
  <title>Resources</title>
  <script type="text/javascript;version=1.8" id="script1">
    "use strict";

    window.addEventListener("load", function onload() {
      let pid = document.getElementById("pid");
      let div = document.createElement("div");
      div.id = "divid";
      div.classList.add("divclass");
      div.appendChild(document.createTextNode("div"));
      div.setAttribute("data-a1", "div");
      pid.parentNode.appendChild(div);
    });
  </script>
  <script src="resources_inpage.jsi"></script>
  <link rel="stylesheet" type="text/css" href="resources_inpage1.css"/>
  <link rel="stylesheet" type="text/css" href="resources_inpage2.css"/>
  <style type="text/css">
    p { color: #800; }
    div { color: #008; }
    h4 { color: #080; }
    h3 { color: #880; }
  </style>
</head>
<body>
  <style type="text/css" id=style2>
    .pclass { background-color: #FEE; }
    .divclass { background-color: #EEF; }
    .h4class { background-color: #EFE; }
    .h3class { background-color: #FFE; }
  </style>

  <p class="pclass" id="pid" data-a1="p">paragraph</p>

  <script>
    "use strict";
    let pid = document.getElementById("pid");
    let h4 = document.createElement("h4");
    h4.id = "h4id";
    h4.classList.add("h4class");
    h4.appendChild(document.createTextNode("h4"));
    h4.setAttribute("data-a1", "h4");
    pid.parentNode.appendChild(h4);
  </script>

</body>
</html>
